<style>
  .assignment-patrol {
    padding: 30px 40px;
    color: #111;
  }

  .assignment-patrol .patrol-title {
    margin-bottom: 30px;
    font-weight: bold;
  }

  .assignment-patrol .item-name {
    border-left: 4px solid #4fb1ec;
    padding-left: 10px;
    line-height: 1;
    margin-bottom: 15px;
  }

  .assignment-patrol .table-box {
    margin-bottom: 30px;
  }

  .assignment-patrol .table-box table tr td {
    text-align: center;
    color: #111;
    padding: 12px;
  }

  .assignment-patrol .plan-box {
    font-size: 0;
    margin-bottom: 50px;
  }

  .assignment-patrol .plan-box .icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #ccc;
    vertical-align: middle;
  }

  .assignment-patrol .plan-box .line {
    display: inline-block;
    width: 50px;
    height: 1px;
    background: #ccc;
    vertical-align: middle;
  }

  .assignment-patrol .plan-box .icon.active {
    border-color: #4fb1ec;
    background: #4fb1ec;
  }

  .assignment-patrol .plan-box .line.active {
    background: #4fb1ec;
  }

  .assignment-patrol .plan-name {
    font-size: 14px;
    margin-top: 5px;
  }

  .assignment-patrol .plan-name .one {
    margin-right: 55px;
  }

  .assignment-patrol .plan-name .two {
    margin-right: 55px;
  }

  .assignment-patrol .form-box .form-group {
    display: flex;
  }

  .assignment-patrol .form-box .form-group .col-sm {
    flex-grow: 1;
  }

  .assignment-patrol .form-box .control-label {
    font-weight: normal;
    margin-right: 0;
    padding-right: 10px;
  }

  .assignment-patrol .form-box .col-sm-5 {
    padding: 0;
  }

  .assignment-patrol .form-box .btn-box {
    text-align: center;
    margin: 0 auto;
  }

  .assignment-patrol .form-box .btn-box .button1 {
    background-color: #fff;
    color: #111;
  }

  .assignment-patrol .form-box .btn-box .button2 {
    background-color: #4fb1ec;
    color: #fff;
    border-color: #4fb1ec;
  }

  .photos {
    max-height: 270px;
  }

  .photos img {
    width: 25%;
    min-width: 60px;
    /*max-height: 25%;*/
  }
</style>
<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" style="height:100%" v-cloak>
    <form id="reportEventForm" method="post" class="form-horizontal" @submit.prevent="save()" accept-charset="UTF-8">
      <input type="hidden" name="id" v-model="item.id"/>
      <input type="hidden" name="reportingType" v-model="item.reportingType"/>
      <div class="assignment-patrol">
        <p class="patrol-title">{{item.riverName}}-【{{item.eventType}}】</p>
        <p class="item-name">上报信息</p>
        <div class="table-box">
          <table class="table table-bordered">
            <tbody>
            <tr>
              <td class="col-md-3 text-center" style="width: 150px;">状态</td>
              <td class="col-md-3 text-center" style="min-width: 250px;">{{stateEnum[item.state]}}</td>
              <th style="width: 30px;" rowspan="6">事件照片</th>
              <td class="photos" rowspan="6">
                <img v-for="(pic,index) in treatmentPrePics" @click="openFancyBox(pic,'')" :src="pic"/>
              </td>
            </tr>
            <tr>
              <td scope="row">所在河道</td>
              <td>{{item.riverName}}</td>
            </tr>
            <tr>
              <td scope="row">上报时间</td>
              <td>{{item.reportingDate | date('yyyy-MM-dd HH:mm:ss')}}</td>
            </tr>
            <tr>
              <td scope="row">上报人</td>
              <td>{{item.reportingUserName}}</td>
            </tr>
            <tr>
              <td scope="row">事件类型</td>
              <td>{{item.eventType}}</td>
            </tr>
            <tr>
              <td scope="row">事件内容</td>
              <td>{{item.eventInfo}}</td>
            </tr>
            </tbody>
          </table>
        </div>
        <p class="item-name">事件进度</p>
        <div class="plan-box">
          <span style="margin-left: 20px;" :class="item.state >= 0 ? 'active':''" class="icon"></span>
          <span :class="item.state >= 0 ? 'active':''" class="line"></span>
          <span :class="item.state >= 1 ? 'active':''" class="line"></span>
          <span :class="item.state >= 1 ? 'active':''" class="icon"></span>
          <span :class="item.state >= 1 ? 'active':''" class="line"></span>
          <span :class="item.state >= 2 ? 'active':''" class="line"></span>
          <span :class="item.state >= 2 ? 'active':''" class="icon"></span>
          <div class="plan-name">
            <span class="one">事件上报</span>
            <span class="two">{{item.treatmentType==0?'直接处理':'事件处理'}}</span>
            <span class="three">事件结案</span>
          </div>
        </div>
        <div v-if="item.treatmentType=='1'">
          <p class="item-name">处理人员</p>
          <div v-if="item.state==0" class="form-box">
            <input type="hidden" name="treatmentType" v-model="item.treatmentType"/>
            <div class="col-sm-5">
              <div class="form-group">
                <label class="control-label" style="width:90px">人员角色</label>
                <div class="col-sm">
                  <select @change="changeTreatmentUserJob" id="bean-treatmentUserJob" name="treatmentUserJob" required="" class="form-control">
                    <option :selected="item.treatmentUserJob=='1'" value="1">河长</option>
                    <option :selected="item.treatmentUserJob=='2'" value="2">巡查员</option>
                    <option :selected="item.treatmentUserJob=='3'" value="3">联系部门</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="col-sm-7">
              <div class="form-group">
                <label class="control-label" style="width:150px">事件处理人员</label>
                <div v-if="isTreatmentArea" class="col-sm" style="margin-right:10px">
                  <select @change="getUserList()" id="bean-treatmentAreaId" name="treatmentAreaId" class="form-control">
                    <option value="">--请选择--</option>
                    <option :value="areaItem.id" :selected="item.treatmentAreaId === areaItem.id" v-for="areaItem in areaItems">{{areaItem.name}}</option>
                  </select>
                </div>
                <div v-if="isTreatmentOrg" class="col-sm" style="margin-right:10px">
                  <select @change="getUserList()" id="bean-treatmentOrgId" name="treatmentOrgId" class="form-control">
                    <option value="">--请选择--</option>
                    <option :value="orgItem.id" :selected="item.treatmentOrgId == orgItem.id" v-for="orgItem in orgItems">{{orgItem.name}}</option>
                  </select>
                </div>
                <div class="col-sm">
                  <select id="bean-treatmentUserId" name="treatmentUserId" required="" class="form-control">
                    <option value="">--请选择--</option>
                    <option :value="userItem.id" :selected="item.treatmentUserId == userItem.id" v-for="userItem in userItems">{{userItem.name}}</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label" style="width:90px">处理备注</label>
              <div class="col-sm">
                <textarea id="bean-treatmentMemo" name="treatmentMemo" class="form-control" rows="3" v-model="item.treatmentMemo"></textarea>
              </div>
            </div>
          </div>
          <div v-else>
            <div class="table-box">
              <table class="table table-bordered">
                <tbody>
                <tr>
                  <th class="col-md-3 text-center" style="width: 150px;">人员角色</th>
                  <th class="col-md-3 text-center" style="min-width: 250px;">事件处理人员</th>
                  <th class="text-center">处理备注</th>
                </tr>
                <tr>
                  <td>
                    <span v-if="item.treatmentUserJob=='1'">河长</span>
                    <span v-if="item.treatmentUserJob=='2'">巡查员</span>
                    <span v-if="item.treatmentUserJob=='3'">联系部门</span>
                  </td>
                  <td>
                    <span v-if="item.treatmentUserJob!='3'" style="margin-right:10px">
                      {{item.treatmentAreaName}}
                    </span>
                    <span v-if="item.treatmentUserJob=='3'" style="margin-right:10px">
                      {{item.treatmentOrgName}}
                    </span>
                    <span>
                      {{item.treatmentUserName}}
                    </span>
                  </td>
                  <td>{{item.treatmentMemo}}</td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div v-if="item.state==2">
          <p class="item-name">处理结果</p>
          <div class="table-box">
            <table class="table table-bordered">
              <tbody>
              <tr>
                <td class="col-md-3" style="width: 150px;">处理人员</td>
                <td class="col-md-3" style="min-width: 250px;">结果反馈</td>
                <td>处理后照片</td>
              </tr>
              <tr>
                <td scope="row">{{item.treatmentUserName}}</td>
                <td>{{item.resultFeedback}}</td>
                <td class="photos">
                  <img v-for="(pic,index) in treatmentPostPics" @click="openFancyBox(pic,'')" :src="pic"/>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="form-box">
          <div class="btn-box">
            <button type="button" @click="lbox.closeMyBoxLayer()" class="btn btn-default button1">取消</button>
            <button v-if="item.state==0 && item.treatmentType=='1'" type="submit" class="btn btn-default button2">完成人员分配</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'

  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import '@/assets/js/validate/validation-vendor.js'
  import 'layui-laydate/dist/theme/default/laydate.css'
  import laydate from 'layui-laydate'
  import {apiUtil, axiosContentType, site} from '@/assets/js/boss'
  // 详情/处理页事件进度：
  //   --  直接处理：上报并直接处理-事件结案；
  //   --  报河长办处理：事件上报-事件处理-事件结案；
  //   --  报上级河长处理：事件上报-事件处理-事件结案。
  // 列表页事件进度：
  //   --  直接上报（上报并直接处理、事件结案）、
  //   --  报河长办处理（事件上报、事件处理、事件结案）、
  //   --  报上级河长处理（下级上报、事件处理、事件结案）
  export default {
    data() {
      return {
        item: {state: 0},
        orgItems: [],
        areaItems: [],
        userItems: [],
        isTreatmentArea: true,
        isTreatmentOrg: false,
        stateEnum: {0: '事件上报', 1: '事件处理', 2: '事件结案'},
        treatmentPrePics: [],
        treatmentPostPics: []
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
      $('#reportEventForm').validate();
      that.staff.init(function () {
        that.newFlag = sessionStorage.getItem(site.reportEvent.info);
        if (that.newFlag) that.uuidToken = apiUtil.guid();
        if (apiUtil.existSessionKey(site.reportEvent.info)) {
          that.info();
        }
      });

      laydate.render({
        elem: '#bean-dateDeadline',
        event: 'click',
        done: function (val) {
          that.item.dateDeadline = val;
        }
      });

      laydate.render({
        elem: '#bean-supervisionDate',
        event: 'click',
        done: function (val) {
          that.item.supervisionDate = val;
        }
      });
    },
    methods: {
      info() {
        let that = this;
        that.reportingType = apiUtil.getQueryString('reportingType');
        console.info(that.reportingType)
        axios.get(site.reportEvent.info + sessionStorage.getItem(site.reportEvent.info), {}).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            let item = result.data;
            if (apiUtil.notEmpty(item.treatmentPrePics)) {
              that.treatmentPrePics = item.treatmentPrePics.split(',');
            }
            if (apiUtil.notEmpty(item.treatmentPostPics)) {
              that.treatmentPostPics = item.treatmentPostPics.split(',');
            }
            that.item = item;
            if (item.state === 0 && item.treatmentType === '1') {
              that._xTreatmentUserJob(that.item.treatmentUserJob);
              that.getArealist();
              that.getUserList();
            }
          } else {
            alert(result.message);
          }
        });
      },
      changeTreatmentUserJob(ele) {
        let that = this;
        that.item.treatmentUserJob = $(ele.target).find('option:selected').val();
        that._xTreatmentUserJob(that.item.treatmentUserJob);
      },
      _xTreatmentUserJob(type) {
        if (type === '3') {
          this.isTreatmentArea = false;
          this.isTreatmentOrg = true;
          this.getOrglist();
        } else {
          this.isTreatmentArea = true;
          this.isTreatmentOrg = false;
          this.getArealist();
        }
        this.userItems = [];
      },
      getArealist() {
        let that = this;
        axios.post(site.area.list, {}).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.areaItems = result.data;
          } else {
            alert(result.message);
          }
        });
      },
      getOrglist() {
        let that = this;
        axios.post(site.orgInfo.list, {}).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.orgItems = result.data;
          } else {
            alert(result.message);
          }
        });
      },
      getUserList() {
        let that = this;
        let dataForm = {areaId: '', orgId: '', type: '', job: ''};
        if (this.isTreatmentArea) {
          dataForm.areaId = $('#bean-treatmentAreaId').find('option:selected').val();
        } else { // 3:联系部门
          dataForm.orgId = $('#bean-treatmentOrgId').find('option:selected').val();
        }
        let treatmentUserJob = $('#bean-treatmentUserJob').find('option:selected').val();
        switch (treatmentUserJob) {
          case '1': { // 1:河长
            dataForm.type = '1';
            break;
          }
          case '2': { // 2:巡查员
            dataForm.job = '巡查员';
            break;
          }
        }
        // console.info(dataForm)
        axios.post(site.riverStaff.list, dataForm).then(function (response) {
          var result = response.data;
          if (result.code === 0) {
            that.userItems = result.data;
          } else {
            alert(result.message);
          }
        });
      },
      save() {
        let that = this;
        if ($('#reportEventForm').valid()) {
          axios.post(site.reportEvent.treatment, $('#reportEventForm').serialize(),
            axiosContentType.xWwwFormUrlencoded).then(function (response) {
            const result = response.data;
            // console.info("获取数据.." + JSON.stringify(result));
            if (result.code === 0) {
              parent.$vueApp.page();
              alert('保存成功!');
              that.lbox.closeMyBoxLayer()
            } else {
              alert(result.message);
            }
          });
        }
      }
    }
  }
</script>
